<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/SystemSetting/StorageLocation' }">储存位置管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">填写分类信息</div>
            <div class="card-body">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <div class="info-ruleForm">
                    <el-form-item label="编码">
                        <el-input v-model="form.code" disabled></el-input>
                    </el-form-item>     
                    <el-form-item label="ID">
                        <el-input v-model="form.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="分类名称" prop="label">
                        <el-input v-model="form.label" @change="inputDisabled"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="所属上级">
                        <el-input v-model="form.parentId"></el-input>
                        <el-button type="text" size="medium" class="el-query-tree" @click="dialogVisible = true">查找</el-button>
                    </el-form-item> -->
                    <el-form-item label="描述">
                        <el-input type="textarea" v-model="form.storageDesc"></el-input>
                    </el-form-item>
                </div>
                <hr>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')" :disabled="disabled">立即保存</el-button>
                    <el-button @click="goBack">返回上一级</el-button>
                </el-form-item>
                </el-form>
                {{ form }}
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "StorageLocationUpdate",
  data() {
    return {
      form: {
        code: "",
        id: "",
        label: "",
        parentId: "",
        remark: "",
        storageDesc: ""
      },
      rules: {
        label: [
          { required: true, message: "请输入储存位置名称", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ]
      },
      disabled: false
    };
  },
  methods: {
    onSubmit(formName) {
      this.disabled = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          request({
            method: "post",
            url: this.$api.updateStorage,
            data: this.form
          }).then(res => {
            this.$message.success("保存成功!");
            this.goBack();
          });
        } else {
          this.disabled = false;
          return false;
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    getStorageDetail() {
      //获取详情
      request({
        method: "get",
        url: this.$api.getStorageDetail + `?id=${this.$route.query.id}`
      }).then(res => {
        this.form = res.data;
        this.disabled = true;
      });
    },
    inputDisabled() {
      this.disabled = false;
      console.log(222);
    }
  },
  mounted() {
    this.getStorageDetail();
  }
};
</script>